<template>
	<!-- 上傳組件 -->
	<view>
		<u-upload :class="{'upload' : show==true}" :fileList="fileList" @afterRead="afterRead"
			@on-remove="handlerRemove" @on-progress="onProgress" :multiple="multiple" name="file" :deletable="deletable"
			:auto-upload="true" :action="action" :uploadText="uploadText" :disabled="disabled" :maxCount="maxCount"
			:show-progress="showProgress" @on-list-change="onListChange" :header="getAuthorizationHeader()"
			@on-success="onSuccess">
		</u-upload>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		props: {
			action: {
				type: String,
				default: 'http://121.36.26.224:9101/CustomerManagement/SalesmanDailyRecord/UploadFileByForm'
			},
			maxCount: { //多张图片上传个数
				type: Number,
				default: 1
			},
			disabled: { //是否启用(显示/隐藏)组件
				type: Boolean,
				default: false
			},
			uploadText: { //上传区域的提示文字
				type: String,
				default: "上传附件"
			},
			file: { //多张图片返回的数组
				type: Array,
				value: []
			},
			imgUrl: { //单张图片返回的地址
				type: String,
				default: ''
			},
			multiple: { // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				type: Boolean,
				default: false
			},
			scene: { //参数
				type: String,
				default: ''
			},
			field: { //返回的字段名称
				type: String,
				default: ''
			},
		},
		watch: {
			file: {
				handler(oldValue) {
					this.fileList = oldValue
				}
			},
			imgUrl: {
				handler(newval) {
					this.oneImgurl = newval
				}
			}
		},
		data() {
			return {
				fileList: this.file,
				showProgress: false, //是显示进度条
				show: false,
				deletable: false, //是否显示删除图片的按钮
				img: {},
				oneImgurl: this.imgUrl,
				fileListData: [],
			}
		},

		methods: {
			// 上传过程中进度条控制
			onProgress(res, index, lists, name) {
				this.showProgress = true
				console.log('上传过程中', res, index, lists, name)
				if (res.progress == 100) {
					this.showProgress = false
				}
			},
			// *******************https://blog.csdn.net/m0_72714828/article/details/135295358
			//:auto-upload="true"自动上传方法，onListChange当内部文件列表被加入文件、移除文件，或手动调用clear方法时触发。
			onListChange(lists, name, data) {
				console.log('删除改变了', lists, name, data, this.fileList)
				let newFileData = lists.map(item => {
					return {
						url: item.response
					}
				})
				this.$emit('onListChange', newFileData)
			},
			// 上传成功
			onSuccess(data, index, lists, name) {
				this.fileListData = lists.map(item => {
					return {
						url: item.response ? item.response.url : item.url
					}
				})
				console.log('获取上传子组件的数据', data, index, lists, this.fileListData)
				this.$emit('onSuccess', this.fileListData)
			},
			// 请求头
			getAuthorizationHeader() {
				const token = uni.getStorageSync('token');
				return {
					Authorization: `Bearer ${token}`,
				};
			},
			// 删除图片handelRemove
			handlerRemove(index, event, name) {
				console.log('删除成功了', index, event, name, this.file, this.fileList, this.fileListData)
				// this.fileList.splice(event.index, 1)
				this.$emit('handlerRemove', this.fileListData, index)
			},
			// 上传图片
			uploadImgFile(event) {
				this.afterRead(event)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				// let lists = event.file
				// if (this.maxCount < 2) {
				// 	const result = await this.uploadFilePromise(event.file)
				// 	this.$emit('getImg', {
				// 		url: result.data.original,
				// 		field: this.field
				// 	})
				// } else {
				// 	for (let i = 0; i < lists.length; i++) {
				// 		const result = await this.uploadFilePromise(lists[i])
				// 		this.fileList.push(result.data.original)
				// 		this.$emit('getImg', {
				// 			list: this.fileList,
				// 			field: this.field
				// 		})
				// 	}
				// }
			},
			uploadFilePromise(item) {
				// var formData = {};
				// return new Promise((resolve, reject) => {
				// 	formData.scene = this.scene
				// 	let a = uni.uploadFile({
				// 		url: app.globalData.reqUrl + '/****/****/***',
				// 		filePath: item.url,
				// 		name: 'image',
				// 		formData: formData,
				// 		success: (res) => {
				// 			let datas = JSON.parse(res.data)
				// 			resolve(datas)
				// 		},
				// 		fail: (err) => {
				// 			uni.showToast({
				// 				title: '上传失败',
				// 				icon: 'none'
				// 			})
				// 		}
				// 	});
				// })
			},
			// 图片放大查看
			// clickImg(url) {
			// 	let _this = this;
			// 	let imgsArray = [];
			// 	imgsArray[0] = url
			// 	uni.previewImage({
			// 		current: 0,
			// 		urls: imgsArray
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scope>
	::v-deep .upload.u-upload {
		.u-add-wrap {
			border: 3px solid red !important;
			display: none;
		}

	}

	.imgList {
		image {
			width: 168rpx;
			height: 168rpx;
			border-radius: 16rpx;
			margin: 0 28rpx 20rpx 0
		}
	}

	.imgListArr {
		width: 168rpx;
		height: 168rpx;
		border-radius: 16rpx;
		margin: 0 30rpx 30rpx 0
	}

	.imgArr {
		position: relative;
	}

	.iconClose {
		position: absolute;
		top: -20rpx;
		right: -10rpx;
	}
</style>